import NavHeader from "@/components/NavHeader"
import { useEffect, useRef } from "react"
import { getCurrentCity } from '@/utils/index.js'
import { cityAllApi, hotCityApi } from "@/apis/cityList.js"
//导入css样式
import "./index.scss"
// 导入List组件
import { List, AutoSizer } from 'react-virtualized'
import { useState } from "react"
import { useNavigate } from "react-router-dom"

import { Toast } from 'antd-mobile'



const CityList = () => {
    //获取跳转对象
    const navigate=useNavigate()
    //城市列表数据
    const [cityList, setCityList] = useState({})
    //城市列表索引数据
    const [cityIndex, SetCityIndex] = useState([])
    // 索引（A、B等）的高度
    const TITLE_HEIGHT = 36
    // 每个城市名称的高度
    const NAME_HEIGHT = 50
    // 指定右侧字母索引列表高亮的索引号
    const [activeIndex, SetActiveIndex] = useState(0)
    //获取城市列表组件
    const citylistTag = useRef()
    //转化城市列表数据
    function formatCityList(list) {
        const cityList = {}
        // 遍历列表数据
        list.forEach(item => {
            const str = item.short.substr(0, 1)
            //如果截取的字符串在对象数组中不存在
            if (!cityList[str]) {//在不存在的对象的属性创建一个新的数组 
                cityList[str] = [item]
            } else {//反之，存在追加数据
                cityList[str].push(item)
            }
        });
        const cityIndex = Object.keys(cityList).sort()

        return {
            cityList,
            cityIndex
        }

    }
    //获取所有的城市数据
    async function getAllCityInfo() {
        //获取所有城市的数据
        const res = await cityAllApi()
        const { cityList, cityIndex } = formatCityList(res.body)
        //获取热门城市数据
        const hotCity = await hotCityApi()
        //将热门城市追加到城市列表中
        cityList['hot'] = hotCity.body
        //向前追加热门城市的标识
        cityIndex.unshift('hot')
        //获取定位城市信息
        const currentCity = await getCurrentCity()
        //将定位城市追加到城市列表中
        cityList['#'] = [currentCity]
        //向前追加定位城市的标识
        cityIndex.unshift('#')
        console.log(cityList, cityIndex);
        //设置城市列表数据和索引值
        setCityList(cityList)
        SetCityIndex(cityIndex)

    }
    useEffect( () => {
        //获取所有的城市数据
        getAllCityInfo()
       
    }, [])
    // 创建动态计算每一行高度的方法
    const getRowHeight = ({ index }) => {
        // 索引标题高度 + 城市数量 * 城市名称的高度
        // TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
        return TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
    }
    //获取需要滚动的距离
    const getScrollDistance=(index)=> {
        let cityArr = cityIndex.slice(0, index )
        let distance=  cityArr.reduce((pre, item) => {
        let distance=pre+(cityList[item].length*NAME_HEIGHT + TITLE_HEIGHT)
          return distance
        },0)
      return distance
   }
    // 封装处理字母索引的方法
    const formatCityIndex = letter => {
        switch (letter) {
            case '#':
                return '当前定位'
            case 'hot':
                return '热门城市'
            default:
                return letter.toUpperCase()
        }
    }
    // 用于获取List组件中渲染行的信息
    const onRowsRendered = ({ startIndex }) => {
        if (activeIndex !== startIndex) {
            SetActiveIndex(startIndex)
        }
    }
    // 有房源的城市
    const HOUSE_CITY = ['北京', '上海', '广州', '深圳']
    //点击切换城市
    const changeCity=(item)=>{
        const {label,value}=item
        //判断该城市是否有房源
        if(HOUSE_CITY.indexOf(label)>-1){//如果有更新本地存储数据
            localStorage.setItem("hkzf_city", JSON.stringify({label,value}))
            //返回上一页
            navigate(-1)
        }else{//否则提示
            Toast.info('该城市暂无房源数据', 1, null, false)
        }
    }
    // 渲染每一行数据的函数
    function rowRenderer({
        key, // 当前行标识
        index, // 索引号
        isScrolling, // 当前项是否正在滚动中
        isVisible, // 当前项在list中是可见的
        style, // 注意：重点属性，一定要给每一行数据添加该样式
    }) {
        // 获取每一行的字母索引
        const letter = cityIndex[index]
        return (
            <div key={key} style={style} className="city">
                <div className="title">{formatCityIndex(letter)}</div>
                {cityList[letter].map(item => (
                    <div
                        className="name"
                        key={item.value}
                        onClick={() => changeCity(item)}
                    >
                        {item.label}
                    </div>
                ))}
            </div>
        )
    }
    return (
        <div className="citylist">
            <NavHeader myStyle={{ marginTop: '-45px' }}>城市选择</NavHeader>
            {/* 城市列表 */}
            <AutoSizer>
                {({ height, width }) => (
                    <List
                        ref={citylistTag}
                        width={width}
                        height={height}
                        rowCount={cityIndex.length}
                        rowHeight={getRowHeight}
                        rowRenderer={rowRenderer}
                        onRowsRendered={onRowsRendered}
                        scrollToAlignment="start"
                    />
                )}
            </AutoSizer>
            {/* 右侧索引列表 */}
            <ul className="city-index">{
                cityIndex.map((item, index) => (
                    <li
                        className="city-index-item"
                        key={item}
                        onClick={() => {
                            if (activeIndex !== index) { citylistTag.current.scrollToPosition(getScrollDistance(index)+1) }
                        }}
                    >
                        <span className={activeIndex === index ? 'index-active' : ''}>
                            {item === 'hot' ? '热' : item.toUpperCase()}
                        </span>
                    </li>
                ))
            }</ul>
        </div>
    )
}

export default CityList